<!-- 放置html代码， template里面的放置的元素有一个根标签-->
<template>
  <!-- 定义的卡片组件 -->

  <el-card>
    <div slot="header">
      <!-- 面包屑组件 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户信息管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 布局组件 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="uname" clearable @clear="findPager" placeholder="请输入用户名称查询"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="findPager" icon="el-icon-search">查询</el-button>
        <el-button type="success" @click="addDialog()" icon="el-icon-plus">添加</el-button>
      </el-col>
    </el-row>
    <!-- 定义表格组件  表格组件中的“:data”属性是绑定数据的，数据是一个数组-->
    <el-table :data="tableData">
      <!-- 定义个表格单元格 -->
      <el-table-column prop="uname" label="用户名称"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column prop="images" label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.images" style="width: 40px;height: 40px;" />
        </template>
      </el-table-column>
      <el-table-column prop="stats" label="状态">
        <template slot-scope="scope">
          <el-switch @change="changeStats(scope.row)" v-model="scope.row.stats" active-color="#13ce66" :active-value="0"
            :inactive-value="1" inactive-color="#ff4949">
          </el-switch>
        </template>

      </el-table-column>
      <el-table-column label="操作">
        <!-- 作用域插槽 -->
        <template slot-scope="scope">
          <el-tooltip content="点击修改" placement="left">
            <el-button type="warning" @click="editDialog(scope.row)" circle icon="el-icon-edit"></el-button>
          </el-tooltip>
          <el-tooltip content="点击删除" placement="right">
            <el-button type="danger" @click="remove(scope.row)" circle icon="el-icon-delete"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pager.page"
      :page-sizes="[5, 15, 20, 25]" :page-size="pager.limit" layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total">
    </el-pagination>
    <!-- 定义添加对话框 -->
    <el-dialog title="添加用户信息" :visible.sync="addDialogFlag">
      <!-- 定义的表单 -->
      <el-form :model="user" :rules="rules" ref="user">
        <!-- 定义表单项 -->
        <el-form-item prop="uname">
          <el-input v-model="user.uname" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="images">
          <el-input v-model="user.images" placeholder="请输入头像"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFlag = false">取 消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-dialog>

    <!-- 定义修改对话框 -->
    <el-dialog title="修改用户信息" :visible.sync="editDialogFlag">
      <el-form :model="user" :rules="rules" ref="user">
        <!-- 定义表单项 -->
        <el-form-item prop="uname">
          <el-input v-model="user.uname" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="images">
          <el-input v-model="user.images" placeholder="请输入头像"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset">取 消</el-button>
        <el-button type="primary" @click="update">保存</el-button>
      </div>
    </el-dialog>

  </el-card>
</template>
<!-- 行为区，放置js代码，包含请求后端的ajax代码 -->
<script>
  export default {
    data() { //定义属性区
      return {
        addDialogFlag: false, //定义显示添加对话框标记，默认是不显示
        editDialogFlag: false, //定义显示修改对话框标记，默认是不显示
        tableData: [], //定义表格的数组，初始化表格数据
        pager: { //封装分页对象
          page: 1, //分页起始数据
          limit: 5, //每页显示最大条数
          total: 0 //统计记录数
        },
        rules: {
          uname: [{
            required: true,
            message: '请输入用户名称',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          images: [{
            required: true,
            message: '请输入头像',
            trigger: 'blur'
          }]

        },
        user: { //定义用户对象，主要封装传递的数据，更改用户状态，修改或者添加用户信息
          uid: 0,
          uname: '',
          password: '',
          images: '',
          stats: ''
        },
        uname: '' //根据用户名称进行条件查询

      }
    },
    methods: { //用户自定方法区
      changeStats(row) {
        this.user = row; //用户定义的user对象赋值
        this.$http.post('http://114.55.238.138:9000/api/user/changeStats', this.user)
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
              this.findPager();
            }
          }).catch(err => {
            this.$message.error('错了哦，网络异常');
          })
      },
      reset() {
        this.user = {};
        this.editDialogFlag = !this.editDialogFlag;
      },
      update() {
        this.$http.post('http://114.55.238.138:9000/api/user/update', this.user).then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.editDialogFlag = !this.editDialogFlag;
            this.findPager(); //再次调用查询
          }
        }).catch(err => {
          this.$message.error('错了哦，网络异常');
        })
      },
      save() {
        this.$http.post('http://114.55.238.138:9000/api/user/save', this.user).then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.addDialogFlag = !this.addDialogFlag; //关闭添加对话框
            this.findPager(); //在此调用查询
          }
        }).catch(err => {
          this.$message.error('错了哦，网络异常');
        })

      },
      editDialog(row) { //点击该方法是打开修改对话框，并不是修改
        this.user = row; //填充修改数据
        this.editDialogFlag = !this.editDialogFlag;
      },
      addDialog() { //点击该方法是打开添加对话框，并不是添加
        this.addDialogFlag = !this.addDialogFlag;
      },
      remove(row) {
        this.$http.post('http://114.55.238.138:9000/api/user/remove?uid=' + row.uid)
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
              this.findPager();
            }

          }).catch(err => {
            this.$message.error('错了哦，网络异常');
          })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pager.limit = val;
        this.findPager();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pager.page = val;
        this.findPager()
      },

      findPager() {
        this.$http.get('http://114.55.238.138:9000/api/user/findPager', {
          params: {
            page: this.pager.page,
            limit: this.pager.limit,
            uname: this.uname
          }
        }).then(res => {
          console.info(res);
          this.tableData = res.data.data.data; //数据
          this.pager.total = res.data.data.count; //统计记录数
        }).catch(err => {
          this.$message.error('错了哦，网络异常');
        })

      }
    },

    created() { //vue技术的生命周期函数，浏览器在加载当前页面时自动渲染里面的代码
      this.findPager();
    }

  }
</script>


<!-- 样式区，放置css样式 -->
<style scoped>
  .el-pagination {
    margin-top: 10px;
  }

  .el-breadcrumb {
    margin-bottom: 20px;
  }
</style>
